<template>
	<view class="">
		<w-navbar title="结算" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<view class="content">
					<view class="user_info_container">
						<view class="address_box">
							<textarea v-model="address_info" class="textarea" :placeholder="placeholder" :maxlength="-1" name="" id="" cols="30" rows="10"></textarea>
							<view class="fr-ac mt-20 mb-10" style="justify-content: flex-end;">
								<view @click="address_info = ''" class="clear">
									清空
								</view>
								<view @click="check_address" class="find">
									识别
								</view>
							</view>
						</view>
						<view class="info_box">
							<view class="info_item">
								<view class="info_name">
									姓名
								</view>
								<view class="">
									<input v-model="name" type="text" placeholder="请输入您的姓名">
								</view>
							</view>
							<view class="info_item">
								<view class="info_name">
									手机
								</view>
								<view class="">
									<input v-model="phone" maxlength="11" type="number" placeholder="请输入您的手机号">
								</view>
							</view>
							<view class="info_item">
								<view class="info_name">
									省市区
								</view>
								<picker style="flex: 1;" @columnchange="addressColumnChange" mode="multiSelector" range-key="name"  :range="address_list" @change="addressChange">
									<view class="fr-ac-jsb">
										<view style="color: #888;" >{{splicingAddress(province_choose.name,city_choose.name,area_choose.name)}}</view>
										<view class="iconfont icon-arrow-down-filling ml-10" style="color: #888;"></view>
									</view>
								</picker>
							</view>
							<view class="info_item">
								<view class="info_name">
									详细地址
								</view>
								<view class="" style="width: 75%;">
									<input v-model="detail_address" type="text" placeholder="请输入您的详细地址">
								</view>
							</view>
						</view>
					</view>
					<view class="order_container">
						<!-- <view class="order_number_box fr-ac pb-20" style="">
							<view class="">
								订单号：123123123123
							</view>
							<view class="iconfont icon-fuzhi1 ml-20"></view>
							<view class="date">
								2024-05-01
							</view>
						</view> -->
						<view class="mb-30" v-for="(item,index) in goods_list" :key="index">
							<view class=" mb-20">
								{{item.goods.title}}
							</view>
							<view class="fr-ac">
								<image :src="ossURL + item.goods.image" mode=""></image>
								<view class="ml-20 fc-jsb" style="height: 100rpx;flex: 1;">
									<view class="">
										{{item.sku_name}}
									</view>
									<view class="fr-ac-jsb">
										<view class="">
											<text>数量：</text>
											<text>{{item.nums}}</text>
										</view>
										<view class="">
											￥{{item.subtotal}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				
					<view class="order_info_box info_box">
						<view class="info_item">
							<view class="info_name">
								选择店铺
							</view>
							<picker mode="selector" range-key="shop_name" :range="shop_list" @change="shopChange">
								<view class="info_value">
									<view class="">
										{{shop_choose.shop_name?shop_choose.shop_name:'请选择'}}
									</view>
									<view class="iconfont icon-arrow-down-filling ml-10"></view>
								</view>
							</picker>
						</view>
						<view class="info_item">
							<view class="info_name">
								需付款
							</view>
							<view class="info_value">
								<view class="">
									￥{{countAllTotalPrice}}
								</view>
							</view>
						</view>
						<view class="info_item">
							<view class="info_name">
								是否顺丰到付
							</view>
							<view class="info_value">
								<switch :checked="is_shunfeng_postage" :color="PUBLIC_STYLE.color" style="transform:scale(0.7)"/>
							</view>
						</view>
					</view>
					
					<view class="remarks">
						<view class="">
							备注
						</view>
						<view class="remarks_textarea">
							<textarea v-model="remarks" class="text" value="" placeholder="如有其他需求,请留下您的备注" />
						</view>
					</view>
					
					<view class="" style="height: 150rpx;">
						
					</view>
				</view>
				<view class="bottom_box fr-ac-jsb">
					<view class="fr-ac ml-30">
						<view class="">
							合计
						</view>
						<view class="price">
							￥{{countAllTotalPrice}}
						</view>
					</view>
					<view @click="balance" class="pay_btn">
						结算
					</view>
				</view>
			</template>
		</w-container>
	</view>
</template>

<script>
	import { isValidPhoneNumber } from '@/utils/common.js'
	export default {
		data() {
			return {
				ids:'',
				name:'',
				phone:'',
				detail_address:'',
				
				placeholder:`请粘贴如"广东省佛山市顺德区世纪莲D出口",陈小春 13288371026自动识别地址，或者在下方手动输入`,
				
				address_info:'',
				res_address_info:{},
				province_choose:{},
				city_choose:{},
				area_choose:{},
				
				address_list_info:[],
				address_list:[[],[],[]],
				
				
				shop_list:[],
				shop_choose:{},
				
				goods_list:[],
				
				is_shunfeng_postage:true,
				remarks:'',
				
				column0:0,
				column1:0,
				column2:0,
				value0:0,
				value1:0,
				value2:0,
				
			}
		},
		watch: {
		
		},
		computed:{
			countAllTotalPrice(){
				let count = 0
				if(this.goods_list.length){
					this.goods_list.map((item,index)=>{
						count += Number(item.subtotal)
					})
				}
				return count.toFixed(2)
			}
		},
		onLoad(options) {
			this.ids = options.ids || ''
			this.get_area_list()
			this.get_shop_list()
			this.get_goods_list()
		},
		onShow() {
		},
		methods: {
			splicingAddress(p , c , a){
				return p && c && a ? `${p??''}${c??''}${a??''}` : '请选择您的地区'
			},
			async balance_add() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/add',
					data: {
						ids:this.ids,
						receiver:this.name,
						mobile:this.phone,
						address:this.detail_address,
						address_info:this.address_info || `${this.detail_address}${this.phone}${this.name}`,
						is_shunfeng_postage:this.is_shunfeng_postage,
						province_id:this.province_choose.value,
						city_id:this.city_choose.value,
						area_id:this.area_choose.value,
						memo:this.remarks,
						shop_id:this.shop_choose.id
					}
				})
				if (res.code == 1) {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					uni.reLaunch({
						url:'/pages/order/my_order'
					})
				}
				uni.hideLoading()
			},
			//地址识别
			async check_address() {
				if(!this.address_info){
					return uni.showToast({
						title:'不能为空',
						icon:'none'
					})
				}
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.address/check_address',
					data: {
						address_info:this.address_info,
					}
				})
				if (res.code == 1) {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					this.res_address_info = res.data
					this.name = this.res_address_info.name
					this.phone = this.res_address_info.mobile
					this.detail_address = this.res_address_info.info
					this.province_choose = {
						name: this.res_address_info.province.region_name,
						value: this.res_address_info.province.region_id,
					}
					this.city_choose = {
						name: this.res_address_info.city.region_name,
						value: this.res_address_info.city.region_id,
					}
					this.area_choose = {
						name: this.res_address_info.district.region_name,
						value: this.res_address_info.district.region_id,
					}
				}
				uni.hideLoading()
			},
			//结算页面的商品信息
			async get_goods_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.cart/get_goods_list',
					data: {
						cart_ids:this.ids,
						sceneval:1 //	1-购物车 2-直接购买
					}
				})
				if (res.code == 1) {
					this.goods_list = res.data
				}
				uni.hideLoading()
			},
			//店铺
			async get_shop_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/get_shop_list',
					data: {
						
					}
				})
				if (res.code == 1) {
					this.shop_list = res.data.shop_list
				}
				uni.hideLoading()
			},
			shopChange(e){
				this.shop_choose = this.shop_list[e.detail.value]
			},
			//省市区
			async get_area_list(province,city) {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.common/get_area_list',
					data: {
						
					}
				})
				if (res.code == 1) {
					this.address_list_info = res.data.area_info
					this.set_address_list(0)
					this.set_address_list(1)
					this.set_address_list(2)
				}
				uni.hideLoading()
			},
			set_address_list(index){
				let list = []
				switch (index){
					case 0:
						list = this.address_list_info.map(item => {
							console.log( Array.isArray(item.cities),555)
							return {
								name:item.show_name,
								value:item.value_id,
								children:item.child
							}
						})
						break;//设置省
					case 1:
						console.log(this.address_list[0][this.value0].children,222)
						list = this.address_list[0][this.value0].children.map(item => {
							return {
								name:item.show_name,
								value:item.value_id,
								children:item.child
							}
						})
						break;//设置市
					case 2:
						list = this.address_list[1][this.value1].children.map(item => {
							return {
								name:item.show_name,
								value:item.value_id,
								children:item.child
							}
						})
						break;//设置区
					default:
						break;
				}
				
				this.$set(this.address_list,index,list)
			},
			addressColumnChange(e){
				console.log(e,22222)
				if(e.detail.column == 0){
					this.column0 = e.detail.column
					this.value0 = e.detail.value
					this.set_address_list(1)
					this.set_address_list(2)
				}
				if(e.detail.column == 1){
					this.column1 = e.detail.column
					this.value1 = e.detail.value
					this.set_address_list(2)
				}
				if(e.detail.column == 2){
					this.column2 = e.detail.column
					this.value2 = e.detail.value
				}
				// this.
			},
			addressChange(e){
				console.log(e,11111)
				this.province_choose = this.address_list[0][e.detail.value[0]]
				this.city_choose = this.address_list[1][e.detail.value[1]]
				this.area_choose = this.address_list[2][e.detail.value[2]]
				this.detail_address = this.province_choose.name + this.city_choose.name + this.area_choose.name
				this.column0 = 0
				this.column1 = 0
				this.column2 = 0
				this.value0 = 0
				this.value1 = 0
				this.value2 = 0
				// this.
			},
			balance(){
				if(!this.name){
					return uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
				}
				if(!isValidPhoneNumber(this.phone)){
					return uni.showToast({
						title:'请输入正确手机号',
						icon:'none'
					})
				}
				if(!this.detail_address){
					return uni.showToast({
						title:'请选择省市区',
						icon:'none'
					})
				}
				if(!this.detail_address){
					return uni.showToast({
						title:'请输入详细地址',
						icon:'none'
					})
				}
				if(!this.shop_choose.id){
					return uni.showToast({
						title:'请选择店铺',
						icon:'none'
					})
				}
				if(!this.remarks){
					return uni.showToast({
						title:'请输入备注',
						icon:'none'
					})
				}
				this.balance_add()
			},
		}
			
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100%;
		background-color: rgb(243,244,248);
	}
	
	.user_info_container{
		box-sizing: border-box;
		padding: 20rpx;
		
		.address_box{
			background-color: white;
			box-sizing: border-box;
			padding: 20rpx;
			.textarea{
				line-height: 1.2;
				width: 100%;
				height: 80rpx;
			}
			
			.clear{
				color: $theme-color;
				margin: 0 20rpx;
				padding: 8rpx 20rpx;
			}
			.find{
				color: white;
				background-color: $theme-color;
				padding: 8rpx 30rpx;
			}
		}
		
		.info_box{
			margin-top: 12rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 0 30rpx;
			
			.info_item{
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #eee;
				
				.info_name{
					width: 25%;
					
				}
			}
		}
	}

	.order_container{
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		
		image{
			min-width: 100rpx;
			min-height: 100rpx;
			width: 100rpx;
			height: 100rpx;
		}
		
		text{
			color: #999;
		}
		
		view,text{
			font-size: 26rpx;
		}
		
		.order_number_box{
			border-bottom: 2rpx solid #eee;
			
			.date{
				color: #999;
				margin-left: auto;
			}
			
		}
		
	}
	
	.order_info_box{
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: white;
		margin-top: 20rpx;
		
		.info_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #eee;
			
			.info_value{
				text-align: right;
				display: flex;
				align-items: center;
				color: #888;
			}
			
			.info_name{
				
			}
		}
		
	}
	
	.remarks{
		box-sizing: border-box;
		padding: 30rpx;
		background-color: white;
		margin-top: 20rpx;
		
		.remarks_textarea{
			margin: 20rpx 0 ;
			border: 2rpx solid #eee ;
			box-sizing: border-box;
			padding: 20rpx;
			
			.text{
				width: 100%;
				height: 80rpx;
			}
		}
	}
	
	.bottom_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		z-index: 999;
		background-color: white;
		box-shadow: 0 0 12rpx #eee;
		
		.price{
			color: $theme-color;
		}
		
		.pay_btn{
			height: 100%;
			width: 30%;
			line-height: 120rpx;
			background-color: $theme-color;
			color: white;
			text-align: center;
		}
		
	}
</style>